<template>
  <section class="area-info">
    <DivShell title="区域信息">
      <div class="container">
        <div>
          <label>小区</label>
          <div :style="`width:${(15483/maxInfoNum)*700*desgin1pxToCilent}px`"></div>
          <span >15483</span>
        </div>
        <div>
          <label>道路街巷</label>
          <div :style="`width:${(10483/maxInfoNum)*700*desgin1pxToCilent}px`"></div>
          <span >10483</span>
        </div>
        <div>
          <label>标注物</label>
          <div :style="`width:${(5483/maxInfoNum)*700*desgin1pxToCilent}px`"></div>
          <span >5483</span>
        </div>
        <div>
          <label>网格</label>
          <div :style="`width:${(483/maxInfoNum)*700*desgin1pxToCilent}px`"></div>
          <span >483</span>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import DivShell from '@src/components/5670/divShell.vue'
export default {
  name: "AreaInfo",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      maxInfoNum:15483,
        
    };
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .area-info{
    display: flex;
    margin-bottom: 20px;
    & .container{
      &>div{
        height: 68px;
        line-height: 68px;
        display: flex;
        align-items: center;
        &>label{
          font-size: 42px;
          color: #707DA4;
          width: 178px;
          text-align: right;
          margin-right: 25px;
        }
        &>div{
          // width: 700px;
          height: 10px;
          background-color: #307fff;
          margin-right: 25px;
          display: flex;
          align-items: center;
        }
        &>span{
          font-size: 48px;
          color: #9CA7C7;
        }
      }
    }
  }
</style>
